<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('支出信息列表')"/>
</head>
<body class="gray-bg">
<input type="hidden" id="salaryCost" name="salaryCost" th:value="${salaryCost}">
<input type="hidden" id="importCost" name="importCost" th:value="${importCost}">
<input type="hidden" id="cost" name="cost" th:value="${cost}">

<input type="hidden" id="a" name="" th:value="${a}">
<input type="hidden" id="b" name="" th:value="${b}">
<input type="hidden" id="c" name="" th:value="${c}">
<input type="hidden" id="d" name="" th:value="${d}">
<input type="hidden" id="e" name="" th:value="${e}">
<input type="hidden" id="f" name="" th:value="${f}">
<input type="hidden" id="g" name="" th:value="${g}">
<input type="hidden" id="income" name="income" th:value="${income}">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <div style="display: flex; flex-direction: column;">
                <div style="height: 100px"><h1>收入/支出分析</h1></div>
                <div id="container" style="height: 600px"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js">
</script>
<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            data: [
                '红茶',
                '绿茶',
                '桔茶',
                '香蕉茶',
                '椰子茶',
                '柠檬茶',
                '三明治',
                '进货支出',
                '工资支出'
            ],
            textStyle: {
                fontSize: '20'
            },
        },
        series: [{
            name: '各自和',
            type: 'pie',
            selectedMode: 'single',
            radius: ['10%', '30%'],
            label: {
                position: 'inner',
                fontSize: 14,
                formatter: function (params) {
                    return '{b|' + params.name + '} : {c|' + params.value + '} ({d|' + params.percent + '%})';
                },
                rich: {
                    b: {
                        color: '#000000',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33,
                    },
                    c: {
                        color: '#000000',
                        fontSize: 14,
                    },
                    d: {
                        color: '#000000',
                        fontSize: 14,
                    }
                }
            },
            labelLine: {
                show: false
            },
            data: [{
                value: document.getElementById("a").value,
                name: '红茶'
            },{
                value: document.getElementById("b").value,
                name: '绿茶'
            },{
                value: document.getElementById("c").value,
                name: '桔茶'
            },{
                value: document.getElementById("d").value,
                name: '香蕉茶'
            },{
                value: document.getElementById("e").value,
                name: '椰子茶'
            },{
                value: document.getElementById("f").value,
                name: '柠檬茶'
            },{
                value: document.getElementById("g").value,
                name: '三明治'
            },
                {
                    value: document.getElementById("salaryCost").value,
                    name: '工资支出'
                }, {
                    value: document.getElementById("importCost").value,
                    name: '进货支出'
                }
            ]
        },
            {
                name: '总和',
                type: 'pie',
                radius: ['70%', '90%'],
                labelLine: {
                    length: 30
                },
                label: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#F6F8FC',
                    borderColor: '#8C8D8E',
                    borderWidth: 1,
                    borderRadius: 4,
                    rich: {
                        a: {
                            color: '#6E7079',
                            lineHeight: 22,
                            align: 'center'
                        },
                        hr: {
                            borderColor: '#8C8D8E',
                            width: '100%',
                            borderWidth: 1,
                            height: 0
                        },
                        b: {
                            color: '#4C5058',
                            fontSize: 20,
                            fontWeight: 'bold',
                            lineHeight: 33
                        },
                        per: {
                            color: '#fff',
                            backgroundColor: '#4C5058',
                            padding: [3, 4],
                            borderRadius: 4
                        }
                    }
                },
                data: [{
                    value: document.getElementById("cost").value,
                    name: '总支出'
                },
                    {
                        value: document.getElementById("income").value,
                        name: '总收入'
                    }
                ]
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
</script>